<template>
  <div>
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.title" width="769px" draggable>
      <el-form ref="userDialogFormRef" :model="state.ruleForm" :rules="rules" label-width="100px" size="default">
        <el-row :gutter="35">
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="电站名称" prop="stationName">
              <el-input v-model="state.ruleForm.stationName" clearable placeholder="请输入充电站名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="站点等级" prop="stationLevel">
              <el-select class="w-full" v-model="state.ruleForm.stationLevel" placeholder="请选择站点等级" clearable>
                <el-option v-for="item in stationLevelList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 省市区选择 -->
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
            <el-form-item label="地区" prop="areaCode">
              <el-cascader clearable class="w-full" :options="state.regionData" v-model="state.selectedOptions"
                @change="onAreaCodeChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="state.ruleForm.longitude" type="number" clearable placeholder="请输入经度"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="state.ruleForm.latitude" type="number" clearable placeholder="请输入纬度"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="位置" prop="location">
              <el-input v-model="state.ruleForm.location" clearable placeholder="位置信息"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="fullLayout" class="mb20">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="state.ruleForm.address" type="textarea" clearable placeholder="请填写详细地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="管理人" prop="manager">
              <el-input v-model="state.ruleForm.manager" clearable placeholder="请输入管理人"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="管理人电话" prop="managerTel">
              <el-input v-model="state.ruleForm.managerTel" clearable placeholder="请输入管理人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="客服电话" prop="serviceTel">
              <el-input v-model="state.ruleForm.serviceTel" clearable placeholder="请输入客服电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="投运时间" prop="operationTime">
              <el-date-picker v-model="state.ruleForm.operationTime" class="w100" placeholder="请选择" type="date"
                value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="运营商" prop="operator">
              <el-input v-model="state.ruleForm.operator" clearable placeholder="请输入运营商"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="运营类型" prop="operationType">
              <el-select class="w-full" v-model="state.ruleForm.operationType" placeholder="请选择运营类型" clearable>
                <el-option v-for="item in operationTypeList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="停车费类型" prop="parkingFeeType">
              <el-select class="w-full" v-model="state.ruleForm.parkingFeeType" placeholder="请选择停车费类型" clearable>
                <el-option v-for="item in parkingFeeTypeList" :key="item.key" :label="item.value" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="站点状态" prop="state">
              <el-switch v-model="state.ruleForm.state" active-value="on" inactive-value="off" active-text="启用"
                inactive-text="关闭" inline-prompt></el-switch>
            </el-form-item>
          </el-col>
          <el-col v-bind="fullLayout" class="mb20">
            <el-form-item label="停车费描述" prop="parkingFeeDesc">
              <el-input v-model="state.ruleForm.parkingFeeDesc" type="textarea" clearable
                placeholder="请输入停车费描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="配套服务" prop="provideServices">
              <el-input v-model="state.ruleForm.provideServices" clearable placeholder="提供配套服务"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="responsiveLayout" class="mb20">
            <el-form-item label="营销标签" prop="marketTags">
              <el-input v-model="state.ruleForm.marketTags" clearable placeholder="营销标签"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="default" @click="onCancel">取 消</el-button>
          <el-button size="default" type="primary" @click="onSubmit(userDialogFormRef)">
            {{ state.dialog.submitTxt }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="systemUserDialog" setup>
import { nextTick, reactive, ref } from 'vue';
import { stationApi } from '/@/api/base/station';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useFormLayout } from '/@/stores/formLayout'
import { storeToRefs } from 'pinia';
import { regionData } from 'element-china-area-data'
import { StationType } from '/@/api/base/types';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
const stores = useFormLayout();
const { responsiveLayout, fullLayout } = storeToRefs(stores);
const state = reactive({
  ruleForm: {
    id: '',
    stationId: '',
    stationName: '',
    longitude: '',
    latitude: '',
    provinceCode: '',
    cityCode: '',
    areaCode: '',
    address: '',
    manager: '',
    managerTel: '',
    serviceTel: '',
    businessLicense: '',
    stationImages: '',
    operator: '',
    operationType: '',
    parkingFeeType: '',
    parkingFeeDesc: '',
    provideServices: '',
    marketTags: '',
    location: '',
    stationLevel: '',
    operationTime: '',
    state: 'on',
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  regionData: regionData,
  selectedOptions: [] as string[]
});
const stationLevelList = ["普通", "优选", "精选", "星级"];
const operationTypeList = ["公共站", "个人站"]
const parkingFeeTypeList = [{ key: "free", value: "停车免费" }, { key: "charge", value: "停车收费" }, { key: "partialFree", value: "停车部分免费" }]

const rules = reactive<FormRules>({
  stationName: [{ required: true, message: '不能为空', trigger: 'blur' }],
  areaCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
  manager: [{ required: true, message: '不能为空', trigger: 'blur' }],
  managerTel: [{ required: true, message: '不能为空', trigger: 'blur' }],
  operator: [{ required: true, message: '不能为空', trigger: 'change' }],
  parkingFeeType: [{ required: true, message: '不能为空', trigger: 'blur' }],
  longitude: [{ required: true, message: '不能为空', trigger: 'blur' }],
  latitude: [{ required: true, message: '不能为空', trigger: 'blur' }],
  serviceTel: [{ required: true, message: '不能为空', trigger: 'blur' }],
});
// 打开弹窗
const openDialog = (type: string, row: StationType) => {
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  state.selectedOptions = []
  if (type === 'edit') {
    state.dialog.title = '修改';
    state.dialog.submitTxt = '修 改';
  } else if (type === 'add') {
    state.dialog.title = '新增';
    state.dialog.submitTxt = '新 增';
  }
  nextTick(() => {
    if (type === 'add') {
      // 清空表单，此项需加表单验证才能使用
      userDialogFormRef.value.resetFields();
    } else {
      state.ruleForm = Object.assign(state.ruleForm, row);
      state.selectedOptions = [state.ruleForm.provinceCode, state.ruleForm.cityCode, state.ruleForm.areaCode]
    }
  });
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};

// 省市区联动选择变更
const onAreaCodeChange = (value: string[]) => {
  if (value && value.length > 0) {
    state.ruleForm.provinceCode = value[0];
    state.ruleForm.cityCode = value[1];
    state.ruleForm.areaCode = value[2];
  } else {
    state.ruleForm.provinceCode = '';
    state.ruleForm.cityCode = '';
    state.ruleForm.areaCode = '';
  }
}
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (state.dialog.type === 'add') {
        stationApi()
          .addRecord(state.ruleForm)
          .then((res) => {
            if (res && res.code === 200) {
              ElMessage.success(res.msg || '新增成功');
              closeDialog();
              emit('refresh');
            }
          });
      } else if (state.dialog.type === 'edit') {
        stationApi()
          .updateRecord(state.ruleForm)
          .then((res) => {
            if (res && res.code === 200) {
              ElMessage.success(res.msg || '修改成功');
              closeDialog();
              emit('refresh');
            }
          });
      }
    }
  });
};
// 暴露变量
defineExpose({
  openDialog,
});
</script>